<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>星语伴 - 专业孤独症家庭干预平台</title>
  
  <!-- Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  
  <!-- Font Awesome -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
  
  <!-- Chart.js -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
  
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: {
              50: '#faf5ff',
              100: '#f3e8ff',
              200: '#e9d5ff',
              300: '#d8b4fe',
              400: '#c084fc',
              500: '#a855f7',
              600: '#9333ea',
              700: '#7e22ce',
              800: '#6b21a8',
              900: '#581c87',
            },
            accent: {
              50: '#fff1f2',
              100: '#ffe4e6',
              200: '#fecdd3',
              300: '#fda4af',
              400: '#fb7185',
              500: '#f43f5e',
              600: '#e11d48',
              700: '#be123c',
              800: '#9f1239',
              900: '#881337',
            },
            sky: {
              50: '#f0f9ff',
              100: '#e0f2fe',
              200: '#bae6fd',
              300: '#7dd3fc',
              400: '#38bdf8',
              500: '#0ea5e9',
              600: '#0284c7',
              700: '#0369a1',
              800: '#075985',
              900: '#0c4a6e',
            }
          },
          fontFamily: {
            sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],
          },
          animation: {
            'float': 'float 3s ease-in-out infinite',
            'fade-in-up': 'fadeInUp 0.8s ease-out',
            'scale-in': 'scaleIn 0.5s ease-out',
            'slide-in-left': 'slideInLeft 0.6s ease-out',
            'slide-in-right': 'slideInRight 0.6s ease-out',
          },
          keyframes: {
            float: {
              '0%, 100%': { transform: 'translateY(0px)' },
              '50%': { transform: 'translateY(-20px)' },
            },
            fadeInUp: {
              '0%': { opacity: '0', transform: 'translateY(30px)' },
              '100%': { opacity: '1', transform: 'translateY(0)' },
            },
            scaleIn: {
              '0%': { opacity: '0', transform: 'scale(0.9)' },
              '100%': { opacity: '1', transform: 'scale(1)' },
            },
            slideInLeft: {
              '0%': { opacity: '0', transform: 'translateX(-50px)' },
              '100%': { opacity: '1', transform: 'translateX(0)' },
            },
            slideInRight: {
              '0%': { opacity: '0', transform: 'translateX(50px)' },
              '100%': { opacity: '1', transform: 'translateX(0)' },
            },
          },
        }
      }
    }
  </script>
  
  <style>
    /* 平滑滚动 */
    html {
      scroll-behavior: smooth;
    }
    
    /* 渐变背景 */
    .gradient-bg-1 {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    
    .gradient-bg-2 {
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }
    
    .gradient-bg-3 {
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }
    
    .gradient-bg-hero {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    }
    
    /* 玻璃态效果 */
    .glass {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    
    .glass-dark {
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    
    /* 自定义滚动条 */
    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    
    ::-webkit-scrollbar-track {
      background: #f1f1f1;
    }
    
    ::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
      border-radius: 5px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, #764ba2 0%, #667eea 100%);
    }
    
    /* 导航栏活动状态 */
    .nav-link {
      position: relative;
      transition: all 0.3s ease;
    }
    
    .nav-link::after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 50%;
      transform: translateX(-50%) scaleX(0);
      width: 100%;
      height: 2px;
      background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
      transition: transform 0.3s ease;
    }
    
    .nav-link:hover::after,
    .nav-link.active::after {
      transform: translateX(-50%) scaleX(1);
    }
    
    /* 按钮效果 */
    .btn {
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
    }
    
    .btn::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.2);
      border-radius: inherit;
      transition: transform 0.5s ease;
    }
    
    .btn:hover::before {
      transform: translate(-50%, -50%) scale(1.5);
    }
    
    /* 卡片悬停效果 */
    .feature-card {
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    
    .feature-card:hover {
      transform: translateY(-10px) scale(1.02);
    }
    
    /* 脉冲动画 */
    @keyframes pulse-ring {
      0% {
        transform: scale(0.8);
        opacity: 1;
      }
      100% {
        transform: scale(1.2);
        opacity: 0;
      }
    }
    
    .pulse-ring {
      animation: pulse-ring 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
    }
    
    /* 悬浮装饰元素 */
    .floating-shape {
      position: absolute;
      border-radius: 50%;
      filter: blur(40px);
      opacity: 0.3;
      animation: float 6s ease-in-out infinite;
    }
    
    /* 标题装饰线 */
    .title-decoration {
      position: relative;
      display: inline-block;
    }
    
    .title-decoration::before {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 4px;
      background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
      border-radius: 2px;
    }
    
    /* 统计数字效果 */
    .stat-number {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    
    /* FAQ 箭头旋转 */
    .faq-arrow {
      transition: transform 0.3s ease;
    }
    
    .faq-arrow.rotate {
      transform: rotate(180deg);
    }
    
    /* 移动端菜单动画 */
    .mobile-menu {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }
    
    .mobile-menu.active {
      max-height: 500px;
    }
    
    /* 模态框动画 */
    .modal {
      transition: opacity 0.3s ease;
    }
    
    .modal-content {
      transition: transform 0.3s ease;
      transform: scale(0.9);
    }
    
    .modal.active .modal-content {
      transform: scale(1);
    }
    
    /* 图片悬停效果 */
    .hover-zoom {
      overflow: hidden;
    }
    
    .hover-zoom img {
      transition: transform 0.5s ease;
    }
    
    .hover-zoom:hover img {
      transform: scale(1.1);
    }
  </style>
</head>
<body class="bg-white text-gray-800 antialiased">
  
  <!-- 顶部导航栏 -->
  <nav class="fixed top-0 left-0 right-0 z-50 glass shadow-lg">
    <div class="container mx-auto px-4 lg:px-8">
      <div class="flex items-center justify-between h-20">
      <!-- Logo -->
        <div class="flex items-center space-x-3">
          <div class="w-12 h-12 gradient-bg-hero rounded-xl flex items-center justify-center shadow-lg">
            <i class="fas fa-heart text-white text-2xl"></i>
          </div>
          <div>
            <h1 class="text-2xl font-bold bg-gradient-to-r from-purple-600 to-pink-500 bg-clip-text text-transparent">星语伴</h1>
            <p class="text-xs text-gray-500 hidden sm:block">专业孤独症家庭干预平台</p>
        </div>
      </div>
      
        <!-- 桌面导航 -->
        <div class="hidden md:flex items-center space-x-8">
          <a href="#home" class="nav-link active text-gray-700 hover:text-purple-600 font-medium">首页</a>
          <a href="#about" class="nav-link text-gray-700 hover:text-purple-600 font-medium">关于孤独症</a>
          <a href="#features" class="nav-link text-gray-700 hover:text-purple-600 font-medium">核心功能</a>
          <a href="#testimonials" class="nav-link text-gray-700 hover:text-purple-600 font-medium">用户评价</a>
          <a href="#faq" class="nav-link text-gray-700 hover:text-purple-600 font-medium">常见问题</a>
        </div>
      
      <!-- 操作按钮 -->
      <div class="hidden md:flex items-center space-x-4">
          <button onclick="openLoginModal()" class="btn px-6 py-2.5 text-purple-600 hover:text-purple-700 font-medium rounded-full border-2 border-purple-600 hover:bg-purple-50">
            登录
          </button>
          <button onclick="openRegisterModal()" class="btn px-6 py-2.5 bg-gradient-to-r from-purple-600 to-pink-500 text-white font-medium rounded-full shadow-lg hover:shadow-xl">
            免费注册
          </button>
      </div>
      
      <!-- 移动端菜单按钮 -->
        <button onclick="toggleMobileMenu()" class="md:hidden text-gray-700 text-2xl">
          <i class="fas fa-bars"></i>
      </button>
    </div>
    
    <!-- 移动端菜单 -->
      <div id="mobileMenu" class="mobile-menu md:hidden border-t border-gray-100">
        <div class="py-4 space-y-4">
          <a href="#home" class="block text-gray-700 hover:text-purple-600 font-medium">首页</a>
          <a href="#about" class="block text-gray-700 hover:text-purple-600 font-medium">关于孤独症</a>
          <a href="#features" class="block text-gray-700 hover:text-purple-600 font-medium">核心功能</a>
          <a href="#testimonials" class="block text-gray-700 hover:text-purple-600 font-medium">用户评价</a>
          <a href="#faq" class="block text-gray-700 hover:text-purple-600 font-medium">常见问题</a>
          <div class="flex flex-col space-y-3 pt-4">
            <button onclick="openLoginModal()" class="btn px-6 py-2.5 text-purple-600 font-medium rounded-full border-2 border-purple-600 text-center">
              登录
            </button>
            <button onclick="openRegisterModal()" class="btn px-6 py-2.5 bg-gradient-to-r from-purple-600 to-pink-500 text-white font-medium rounded-full text-center">
              免费注册
            </button>
          </div>
        </div>
      </div>
        </div>
      </nav>
  
  <!-- Hero Section -->
  <section id="home" class="relative min-h-screen flex items-center justify-center overflow-hidden pt-20">
    <!-- 背景装饰 -->
    <div class="absolute inset-0 gradient-bg-hero opacity-90"></div>
    <div class="floating-shape w-64 h-64 bg-purple-400 top-20 left-10"></div>
    <div class="floating-shape w-96 h-96 bg-pink-400 bottom-20 right-10" style="animation-delay: 1s;"></div>
    <div class="floating-shape w-48 h-48 bg-blue-400 top-1/2 right-1/4" style="animation-delay: 2s;"></div>
    
    <!-- 内容 -->
    <div class="relative z-10 container mx-auto px-4 lg:px-8 py-20">
      <div class="max-w-4xl mx-auto text-center">
        <div class="animate-fade-in-up">
          <h1 class="text-5xl md:text-6xl lg:text-7xl font-bold text-white mb-6 leading-tight">
            科学家庭干预<br>
            陪"星宝"慢慢长大
          </h1>
          <p class="text-xl md:text-2xl text-white/90 mb-12 max-w-3xl mx-auto leading-relaxed">
            专为孤独症儿童设计的家庭干预平台<br>
            让专业干预融入日常，让每一步成长都清晰可见
          </p>
          <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
            <button onclick="openRegisterModal()" class="btn px-10 py-4 bg-white text-purple-600 font-bold text-lg rounded-full shadow-2xl hover:shadow-3xl transform hover:scale-105">
              <i class="fas fa-rocket mr-2"></i>
              立即开始免费使用
            </button>
            <button onclick="scrollToFeatures()" class="btn px-10 py-4 bg-white/20 text-white font-bold text-lg rounded-full border-2 border-white backdrop-blur-sm hover:bg-white/30">
              <i class="fas fa-arrow-down mr-2"></i>
              了解更多
            </button>
    </div>
        </div>
        
        <!-- 统计数据 -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mt-20 animate-scale-in">
          <div class="text-center">
            <div class="text-4xl md:text-5xl font-bold text-white mb-2">1000+</div>
            <p class="text-white/80">专业任务</p>
        </div>
          <div class="text-center">
            <div class="text-4xl md:text-5xl font-bold text-white mb-2">5000+</div>
            <p class="text-white/80">服务家庭</p>
      </div>
          <div class="text-center">
            <div class="text-4xl md:text-5xl font-bold text-white mb-2">50000+</div>
            <p class="text-white/80">完成任务</p>
          </div>
          <div class="text-center">
            <div class="text-4xl md:text-5xl font-bold text-white mb-2">95%</div>
            <p class="text-white/80">满意度</p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 滚动提示 -->
    <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
      <i class="fas fa-chevron-down text-white text-3xl opacity-70"></i>
    </div>
  </section>

  <!-- 关于孤独症 -->
  <section id="about" class="py-20 lg:py-32 bg-white">
    <div class="container mx-auto px-4 lg:px-8">
      <div class="text-center mb-16">
        <h2 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4 title-decoration">认识孤独症</h2>
        <p class="text-xl text-gray-600 max-w-3xl mx-auto">了解孤独症，是开启科学干预的第一步</p>
      </div>
      
      <div class="grid md:grid-cols-2 gap-12 lg:gap-16 items-center max-w-6xl mx-auto">
        <!-- 左侧图片 -->
        <div class="animate-slide-in-left">
          <div class="relative hover-zoom rounded-3xl overflow-hidden shadow-2xl">
            <img src="https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?w=800" alt="孤独症儿童" class="w-full h-auto">
            <div class="absolute inset-0 bg-gradient-to-t from-purple-900/50 to-transparent"></div>
          </div>
        </div>
        
        <!-- 右侧内容 -->
        <div class="animate-slide-in-right space-y-8">
          <div class="bg-gradient-to-br from-purple-50 to-pink-50 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow">
            <div class="flex items-start space-x-4">
              <div class="w-12 h-12 gradient-bg-1 rounded-xl flex items-center justify-center flex-shrink-0">
                <i class="fas fa-question-circle text-white text-xl"></i>
              </div>
          <div>
                <h3 class="text-2xl font-bold text-gray-800 mb-3">什么是孤独症？</h3>
                <p class="text-gray-600 leading-relaxed">
                  孤独症谱系障碍（ASD）是一种神经发育障碍，核心表现为社交沟通困难、兴趣狭窄和重复刻板行为。每个孩子的症状差异较大，需要"一人一策"的个性化干预方案。
                </p>
              </div>
            </div>
          </div>
          
          <div class="bg-gradient-to-br from-blue-50 to-purple-50 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow">
            <div class="flex items-start space-x-4">
              <div class="w-12 h-12 gradient-bg-3 rounded-xl flex items-center justify-center flex-shrink-0">
                <i class="fas fa-home text-white text-xl"></i>
              </div>
          <div>
                <h3 class="text-2xl font-bold text-gray-800 mb-3">家庭干预的重要性</h3>
                <p class="text-gray-600 leading-relaxed">
                  家庭是孩子最熟悉的环境，在这里进行干预训练能让孩子更放松、更容易接受。家长的参与能及时捕捉每一次进步，让干预更加持续有效。
                </p>
              </div>
            </div>
          </div>
          
          <div class="bg-gradient-to-br from-pink-50 to-purple-50 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow">
            <div class="flex items-start space-x-4">
              <div class="w-12 h-12 gradient-bg-2 rounded-xl flex items-center justify-center flex-shrink-0">
                <i class="fas fa-lightbulb text-white text-xl"></i>
              </div>
          <div>
                <h3 class="text-2xl font-bold text-gray-800 mb-3">我们如何帮助您</h3>
                <p class="text-gray-600 leading-relaxed">
                  通过"任务拆解 → 定时提醒 → 进度追踪 → 效果可视化"的全流程支持，将专业干预方法转化为可操作的日常任务，让家庭干预变得简单高效。
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 核心功能 -->
  <section id="features" class="py-20 lg:py-32 bg-gradient-to-br from-purple-50 via-pink-50 to-blue-50">
    <div class="container mx-auto px-4 lg:px-8">
      <div class="text-center mb-16">
        <h2 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4 title-decoration">四大核心功能</h2>
        <p class="text-xl text-gray-600 max-w-3xl mx-auto">专为孤独症儿童家庭干预设计的完整解决方案</p>
      </div>
      
      <div class="grid md:grid-cols-2 gap-8 max-w-7xl mx-auto">
        <!-- 功能卡片 1 -->
        <div class="feature-card bg-white rounded-3xl p-8 lg:p-10 shadow-xl hover:shadow-2xl">
          <div class="flex items-center mb-6">
            <div class="w-16 h-16 gradient-bg-1 rounded-2xl flex items-center justify-center mr-5 shadow-lg">
              <i class="fas fa-tasks text-white text-3xl"></i>
            </div>
            <h3 class="text-2xl lg:text-3xl font-bold text-gray-800">1000+ 任务库</h3>
          </div>
          
          <ul class="space-y-4 mb-6">
            <li class="flex items-start">
              <i class="fas fa-check-circle text-purple-500 text-xl mr-3 mt-1 flex-shrink-0"></i>
              <span class="text-gray-700 text-lg">覆盖社交沟通、生活自理、认知能力三大核心领域</span>
            </li>
            <li class="flex items-start">
              <i class="fas fa-check-circle text-purple-500 text-xl mr-3 mt-1 flex-shrink-0"></i>
              <span class="text-gray-700 text-lg">按难度、时长、干预目标多维度智能筛选</span>
            </li>
            <li class="flex items-start">
              <i class="fas fa-check-circle text-purple-500 text-xl mr-3 mt-1 flex-shrink-0"></i>
              <span class="text-gray-700 text-lg">支持自定义任务，打造个性化训练方案</span>
            </li>
          </ul>
          
          <div class="bg-gradient-to-r from-purple-100 to-pink-100 rounded-xl p-4">
            <p class="text-gray-700 flex items-start">
              <i class="fas fa-star text-yellow-500 mr-2 mt-1 flex-shrink-0"></i>
              <span>结构化任务设计符合孤独症儿童"循序渐进"的学习特点，让每一步都有据可循</span>
            </p>
          </div>
        </div>
        
        <!-- 功能卡片 2 -->
        <div class="feature-card bg-white rounded-3xl p-8 lg:p-10 shadow-xl hover:shadow-2xl">
          <div class="flex items-center mb-6">
            <div class="w-16 h-16 gradient-bg-2 rounded-2xl flex items-center justify-center mr-5 shadow-lg">
              <i class="fas fa-bell text-white text-3xl"></i>
            </div>
            <h3 class="text-2xl lg:text-3xl font-bold text-gray-800">智能任务提醒</h3>
          </div>
          
          <ul class="space-y-4 mb-6">
            <li class="flex items-start">
              <i class="fas fa-check-circle text-pink-500 text-xl mr-3 mt-1 flex-shrink-0"></i>
              <span class="text-gray-700 text-lg">支持每日固定任务和每周重点任务设置</span>
            </li>
            <li class="flex items-start">
              <i class="fas fa-check-circle text-pink-500 text-xl mr-3 mt-1 flex-shrink-0"></i>
              <span class="text-gray-700 text-lg">温和提醒方式，避免突然打断造成情绪波动</span>
            </li>
            <li class="flex items-start">
              <i class="fas fa-check-circle text-pink-500 text-xl mr-3 mt-1 flex-shrink-0"></i>
              <span class="text-gray-700 text-lg">一键调整任务时间，灵活适配家庭作息</span>
            </li>
          </ul>
          
          <div class="bg-gradient-to-r from-pink-100 to-purple-100 rounded-xl p-4">
            <p class="text-gray-700 flex items-start">
              <i class="fas fa-star text-yellow-500 mr-2 mt-1 flex-shrink-0"></i>
              <span>定时任务帮助建立稳定的训练习惯，规律作息对孤独症儿童尤为重要</span>
            </p>
          </div>
        </div>
        
        <!-- 功能卡片 3 -->
        <div class="feature-card bg-white rounded-3xl p-8 lg:p-10 shadow-xl hover:shadow-2xl">
          <div class="flex items-center mb-6">
            <div class="w-16 h-16 gradient-bg-3 rounded-2xl flex items-center justify-center mr-5 shadow-lg">
              <i class="fas fa-clipboard-check text-white text-3xl"></i>
            </div>
            <h3 class="text-2xl lg:text-3xl font-bold text-gray-800">进度记录追踪</h3>
          </div>
          
          <ul class="space-y-4 mb-6">
            <li class="flex items-start">
              <i class="fas fa-check-circle text-blue-500 text-xl mr-3 mt-1 flex-shrink-0"></i>
              <span class="text-gray-700 text-lg">一键标记任务完成状态，支持详细备注</span>
            </li>
            <li class="flex items-start">
              <i class="fas fa-check-circle text-blue-500 text-xl mr-3 mt-1 flex-shrink-0"></i>
              <span class="text-gray-700 text-lg">自动存储历史记录，按周/月分类查看</span>
            </li>
            <li class="flex items-start">
              <i class="fas fa-check-circle text-blue-500 text-xl mr-3 mt-1 flex-shrink-0"></i>
              <span class="text-gray-700 text-lg">支持导出打印，便于与专业医师沟通</span>
            </li>
          </ul>
          
          <div class="bg-gradient-to-r from-blue-100 to-purple-100 rounded-xl p-4">
            <p class="text-gray-700 flex items-start">
              <i class="fas fa-star text-yellow-500 mr-2 mt-1 flex-shrink-0"></i>
              <span>可视化记录让每一个小进步都清晰可见，增强家长干预信心</span>
            </p>
          </div>
        </div>
        
        <!-- 功能卡片 4 - 带图表 -->
        <div class="feature-card bg-white rounded-3xl p-8 lg:p-10 shadow-xl hover:shadow-2xl">
          <div class="flex items-center mb-6">
            <div class="w-16 h-16 gradient-bg-hero rounded-2xl flex items-center justify-center mr-5 shadow-lg">
              <i class="fas fa-chart-line text-white text-3xl"></i>
            </div>
            <h3 class="text-2xl lg:text-3xl font-bold text-gray-800">能力曲线可视化</h3>
          </div>
          
          <ul class="space-y-4 mb-6">
            <li class="flex items-start">
              <i class="fas fa-check-circle text-purple-500 text-xl mr-3 mt-1 flex-shrink-0"></i>
              <span class="text-gray-700 text-lg">自动生成三大能力领域的成长曲线</span>
            </li>
            <li class="flex items-start">
              <i class="fas fa-check-circle text-purple-500 text-xl mr-3 mt-1 flex-shrink-0"></i>
              <span class="text-gray-700 text-lg">直观展示核心趋势，无复杂数据干扰</span>
            </li>
            <li class="flex items-start">
              <i class="fas fa-check-circle text-purple-500 text-xl mr-3 mt-1 flex-shrink-0"></i>
              <span class="text-gray-700 text-lg">点击查看详细任务完成情况</span>
            </li>
          </ul>
          
          <!-- 示例图表 -->
          <div class="bg-gradient-to-r from-purple-50 to-pink-50 rounded-xl p-4 mb-4">
            <canvas id="abilityChart" class="w-full" style="height: 200px;"></canvas>
          </div>
          
          <div class="bg-gradient-to-r from-purple-100 to-pink-100 rounded-xl p-4">
            <p class="text-gray-700 flex items-start">
              <i class="fas fa-star text-yellow-500 mr-2 mt-1 flex-shrink-0"></i>
              <span>将碎片化进步转化为直观趋势，避免因"短期无变化"而放弃</span>
            </p>
      </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 用户评价 -->
  <section id="testimonials" class="py-20 lg:py-32 bg-white">
    <div class="container mx-auto px-4 lg:px-8">
      <div class="text-center mb-16">
        <h2 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4 title-decoration">真实家长评价</h2>
        <p class="text-xl text-gray-600 max-w-3xl mx-auto">来自使用星语伴的家长们的心声</p>
      </div>
      
      <div class="grid md:grid-cols-3 gap-8 max-w-7xl mx-auto">
        <!-- 评价卡片 1 -->
        <div class="bg-gradient-to-br from-purple-50 to-white rounded-3xl p-8 shadow-xl hover:shadow-2xl transition-all transform hover:-translate-y-2">
          <div class="flex items-center mb-6">
            <div class="w-16 h-16 gradient-bg-1 rounded-full flex items-center justify-center text-white text-2xl font-bold mr-4">
              李
            </div>
            <div>
              <h4 class="text-xl font-bold text-gray-800">李女士</h4>
              <p class="text-gray-500">使用 6 个月</p>
            </div>
          </div>
          
          <div class="flex mb-4">
            <i class="fas fa-star text-yellow-400 text-xl"></i>
            <i class="fas fa-star text-yellow-400 text-xl"></i>
            <i class="fas fa-star text-yellow-400 text-xl"></i>
            <i class="fas fa-star text-yellow-400 text-xl"></i>
            <i class="fas fa-star text-yellow-400 text-xl"></i>
          </div>
          
          <p class="text-gray-700 leading-relaxed italic">
            "平台的任务设计非常专业，儿子现在能主动和我们打招呼了。看到能力曲线一点点上升，特别有成就感！"
          </p>
        </div>
        
        <!-- 评价卡片 2 -->
        <div class="bg-gradient-to-br from-pink-50 to-white rounded-3xl p-8 shadow-xl hover:shadow-2xl transition-all transform hover:-translate-y-2">
          <div class="flex items-center mb-6">
            <div class="w-16 h-16 gradient-bg-2 rounded-full flex items-center justify-center text-white text-2xl font-bold mr-4">
              王
            </div>
            <div>
              <h4 class="text-xl font-bold text-gray-800">王先生</h4>
              <p class="text-gray-500">使用 3 个月</p>
            </div>
          </div>
          
          <div class="flex mb-4">
            <i class="fas fa-star text-yellow-400 text-xl"></i>
            <i class="fas fa-star text-yellow-400 text-xl"></i>
            <i class="fas fa-star text-yellow-400 text-xl"></i>
            <i class="fas fa-star text-yellow-400 text-xl"></i>
            <i class="fas fa-star text-yellow-400 text-xl"></i>
          </div>
          
          <p class="text-gray-700 leading-relaxed italic">
            "定时提醒功能很贴心，不用担心忘记训练时间。记录功能也很方便，每次复诊都能给医生看具体数据。"
          </p>
        </div>
        
        <!-- 评价卡片 3 -->
        <div class="bg-gradient-to-br from-blue-50 to-white rounded-3xl p-8 shadow-xl hover:shadow-2xl transition-all transform hover:-translate-y-2">
          <div class="flex items-center mb-6">
            <div class="w-16 h-16 gradient-bg-3 rounded-full flex items-center justify-center text-white text-2xl font-bold mr-4">
              张
            </div>
            <div>
              <h4 class="text-xl font-bold text-gray-800">张女士</h4>
              <p class="text-gray-500">使用 8 个月</p>
            </div>
          </div>
          
          <div class="flex mb-4">
            <i class="fas fa-star text-yellow-400 text-xl"></i>
            <i class="fas fa-star text-yellow-400 text-xl"></i>
            <i class="fas fa-star text-yellow-400 text-xl"></i>
            <i class="fas fa-star text-yellow-400 text-xl"></i>
            <i class="fas fa-star text-yellow-400 text-xl"></i>
          </div>
          
          <p class="text-gray-700 leading-relaxed italic">
            "最喜欢任务库，按难度分级很科学。女儿现在自理能力进步明显，能自己穿衣服了，感谢平台！"
          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- 常见问题 -->
  <section id="faq" class="py-20 lg:py-32 bg-gradient-to-br from-gray-50 to-purple-50">
    <div class="container mx-auto px-4 lg:px-8">
      <div class="text-center mb-16">
        <h2 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4 title-decoration">常见问题</h2>
        <p class="text-xl text-gray-600 max-w-3xl mx-auto">解答您最关心的问题</p>
      </div>
      
      <div class="max-w-4xl mx-auto space-y-4">
        <!-- FAQ 1 -->
        <div class="bg-white rounded-2xl shadow-lg overflow-hidden">
          <button onclick="toggleFAQ(this)" class="w-full px-8 py-6 text-left flex items-center justify-between hover:bg-purple-50 transition-colors">
            <span class="text-xl font-bold text-gray-800">平台适合什么年龄段的孩子？</span>
            <i class="fas fa-chevron-down text-purple-600 text-xl faq-arrow"></i>
          </button>
          <div class="faq-content max-h-0 overflow-hidden transition-all duration-300">
            <div class="px-8 py-6 bg-purple-50 border-t border-purple-100">
              <p class="text-gray-700 leading-relaxed text-lg">
                平台适合 2-12 岁的孤独症儿童。任务库按年龄段和能力水平进行科学分级，家长可以根据孩子的实际情况选择最合适的任务。无论孩子处于哪个发展阶段，都能找到适合的训练内容。
              </p>
            </div>
          </div>
        </div>
        
        <!-- FAQ 2 -->
        <div class="bg-white rounded-2xl shadow-lg overflow-hidden">
          <button onclick="toggleFAQ(this)" class="w-full px-8 py-6 text-left flex items-center justify-between hover:bg-purple-50 transition-colors">
            <span class="text-xl font-bold text-gray-800">需要每天花多长时间使用平台？</span>
            <i class="fas fa-chevron-down text-purple-600 text-xl faq-arrow"></i>
          </button>
          <div class="faq-content max-h-0 overflow-hidden transition-all duration-300">
            <div class="px-8 py-6 bg-purple-50 border-t border-purple-100">
              <p class="text-gray-700 leading-relaxed text-lg">
                建议每天进行 30-60 分钟的结构化训练，可以分散到不同时段进行。平台会根据您设置的时间自动提醒，确保训练的规律性。您可以根据孩子的状态和家庭实际情况灵活调整。
              </p>
            </div>
          </div>
        </div>
        
        <!-- FAQ 3 -->
        <div class="bg-white rounded-2xl shadow-lg overflow-hidden">
          <button onclick="toggleFAQ(this)" class="w-full px-8 py-6 text-left flex items-center justify-between hover:bg-purple-50 transition-colors">
            <span class="text-xl font-bold text-gray-800">平台收费吗？</span>
            <i class="fas fa-chevron-down text-purple-600 text-xl faq-arrow"></i>
          </button>
          <div class="faq-content max-h-0 overflow-hidden transition-all duration-300">
            <div class="px-8 py-6 bg-purple-50 border-t border-purple-100">
              <p class="text-gray-700 leading-relaxed text-lg">
                平台提供基础功能免费使用，包括任务库、进度记录、能力曲线等核心功能。高级功能如个性化训练计划定制、专家在线咨询等需要付费订阅，价格透明合理。
              </p>
            </div>
          </div>
        </div>
        
        <!-- FAQ 4 -->
        <div class="bg-white rounded-2xl shadow-lg overflow-hidden">
          <button onclick="toggleFAQ(this)" class="w-full px-8 py-6 text-left flex items-center justify-between hover:bg-purple-50 transition-colors">
            <span class="text-xl font-bold text-gray-800">能看到孩子的具体进步吗？</span>
            <i class="fas fa-chevron-down text-purple-600 text-xl faq-arrow"></i>
          </button>
          <div class="faq-content max-h-0 overflow-hidden transition-all duration-300">
            <div class="px-8 py-6 bg-purple-50 border-t border-purple-100">
              <p class="text-gray-700 leading-relaxed text-lg">
                当然可以！平台会自动生成能力曲线图，直观展示孩子在社交、自理、认知三大领域的进步趋势。您还可以查看每周/每月的详细记录和对比分析，让每一点进步都有据可查。
              </p>
            </div>
          </div>
        </div>
        
        <!-- FAQ 5 -->
        <div class="bg-white rounded-2xl shadow-lg overflow-hidden">
          <button onclick="toggleFAQ(this)" class="w-full px-8 py-6 text-left flex items-center justify-between hover:bg-purple-50 transition-colors">
            <span class="text-xl font-bold text-gray-800">没有干预经验的家长能用吗？</span>
            <i class="fas fa-chevron-down text-purple-600 text-xl faq-arrow"></i>
          </button>
          <div class="faq-content max-h-0 overflow-hidden transition-all duration-300">
            <div class="px-8 py-6 bg-purple-50 border-t border-purple-100">
              <p class="text-gray-700 leading-relaxed text-lg">
                完全可以！平台的每个任务都配有详细的操作指引和示范视频，即使是零基础的家长也能轻松上手。我们还提供新手指导课程和 7×24 小时在线帮助，随时为您答疑解惑。
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- CTA Section -->
  <section class="py-20 lg:py-32 gradient-bg-hero relative overflow-hidden">
    <div class="floating-shape w-64 h-64 bg-white/20 top-10 left-10"></div>
    <div class="floating-shape w-96 h-96 bg-white/20 bottom-10 right-10" style="animation-delay: 1s;"></div>
    
    <div class="container mx-auto px-4 lg:px-8 relative z-10">
      <div class="max-w-4xl mx-auto text-center">
        <h2 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6">
          立即开始您的干预之旅
        </h2>
        <p class="text-xl md:text-2xl text-white/90 mb-12">
          加入 5000+ 家庭，让科学干预陪伴孩子成长
        </p>
        
        <div class="flex flex-col sm:flex-row items-center justify-center gap-6">
          <button onclick="openRegisterModal()" class="btn px-12 py-5 bg-white text-purple-600 font-bold text-xl rounded-full shadow-2xl hover:shadow-3xl transform hover:scale-105">
            <i class="fas fa-user-plus mr-2"></i>
            免费注册
        </button>
          <button onclick="openLoginModal()" class="btn px-12 py-5 bg-transparent text-white font-bold text-xl rounded-full border-3 border-white hover:bg-white hover:text-purple-600">
            <i class="fas fa-sign-in-alt mr-2"></i>
            立即登录
        </button>
      </div>
        
        <p class="text-white/80 mt-8 text-sm">
          注册即表示同意 <a href="#" class="underline hover:text-white">《用户协议》</a> 和 <a href="#" class="underline hover:text-white">《隐私政策》</a>
        </p>
      </div>
    </div>
  </section>

  <!-- 页脚 -->
  <footer class="bg-gray-900 text-gray-300 py-12">
    <div class="container mx-auto px-4 lg:px-8">
      <div class="grid md:grid-cols-3 gap-12 mb-8">
        <!-- 关于我们 -->
        <div>
          <div class="flex items-center space-x-3 mb-4">
            <div class="w-10 h-10 gradient-bg-hero rounded-lg flex items-center justify-center">
              <i class="fas fa-heart text-white text-lg"></i>
            </div>
            <h3 class="text-xl font-bold text-white">星语伴</h3>
          </div>
          <p class="text-gray-400 leading-relaxed">
            专注孤独症家庭干预的数字化平台，依托专业干预理论，为家长提供可落地的训练工具，陪伴孩子健康成长。
          </p>
        </div>
        
        <!-- 联系我们 -->
        <div>
          <h4 class="text-lg font-bold text-white mb-4">联系我们</h4>
          <div class="space-y-3">
            <p class="flex items-center">
              <i class="fas fa-envelope mr-3 text-purple-400"></i>
              service@xingyuban.com
            </p>
            <p class="flex items-center">
              <i class="fas fa-phone mr-3 text-purple-400"></i>
              400-123-4567
            </p>
            <div class="flex space-x-4 pt-2">
              <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-purple-600 transition-colors">
                <i class="fab fa-weixin"></i>
              </a>
              <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-purple-600 transition-colors">
                <i class="fab fa-weibo"></i>
              </a>
              <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-purple-600 transition-colors">
                <i class="fab fa-qq"></i>
              </a>
            </div>
          </div>
        </div>
        
        <!-- 快速链接 -->
        <div>
          <h4 class="text-lg font-bold text-white mb-4">快速链接</h4>
          <div class="grid grid-cols-2 gap-3">
            <a href="#" class="hover:text-purple-400 transition-colors">关于我们</a>
            <a href="#" class="hover:text-purple-400 transition-colors">隐私政策</a>
            <a href="#" class="hover:text-purple-400 transition-colors">用户协议</a>
            <a href="#" class="hover:text-purple-400 transition-colors">帮助中心</a>
            <a href="#" class="hover:text-purple-400 transition-colors">专家团队</a>
            <a href="#" class="hover:text-purple-400 transition-colors">联系我们</a>
          </div>
        </div>
      </div>
      
      <div class="border-t border-gray-800 pt-8 text-center text-gray-500">
        <p>© 2025 星语伴 - 孤独症家庭干预平台 版权所有</p>
      </div>
    </div>
  </footer>

  <!-- 登录模态框 -->
  <div id="loginModal" class="modal fixed inset-0 bg-black/70 backdrop-blur-sm z-50 flex items-center justify-center hidden">
    <div class="modal-content bg-white rounded-3xl p-8 max-w-md w-full mx-4 shadow-2xl">
      <div class="flex items-center justify-between mb-8">
        <h3 class="text-3xl font-bold text-gray-800">欢迎回来</h3>
        <button onclick="closeLoginModal()" class="text-gray-400 hover:text-gray-600 text-2xl">
          <i class="fas fa-times"></i>
        </button>
      </div>
      
      <form onsubmit="handleLogin(event)" class="space-y-6">
        <div>
          <label class="block text-gray-700 font-medium mb-2">手机号</label>
          <input type="tel" id="loginPhone" class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:outline-none focus:border-purple-500 transition-colors" placeholder="请输入手机号" required>
        </div>
        
        <div>
          <label class="block text-gray-700 font-medium mb-2">密码</label>
          <input type="password" id="loginPassword" class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:outline-none focus:border-purple-500 transition-colors" placeholder="请输入密码" required>
          </div>
        
        <div class="flex items-center justify-between text-sm">
          <label class="flex items-center text-gray-600">
            <input type="checkbox" class="mr-2 rounded">
            记住我
          </label>
          <a href="#" class="text-purple-600 hover:text-purple-700 font-medium">忘记密码？</a>
        </div>
        
        <button type="submit" class="w-full btn py-4 bg-gradient-to-r from-purple-600 to-pink-500 text-white font-bold text-lg rounded-xl shadow-lg hover:shadow-xl">
          登录
        </button>
      </form>
      
      <div class="mt-6 text-center">
        <p class="text-gray-600">
          还没有账号？
          <button onclick="switchToRegister()" class="text-purple-600 hover:text-purple-700 font-bold">立即注册</button>
        </p>
      </div>
    </div>
  </div>

  <!-- 注册模态框 -->
  <div id="registerModal" class="modal fixed inset-0 bg-black/70 backdrop-blur-sm z-50 flex items-center justify-center hidden">
    <div class="modal-content bg-white rounded-3xl p-8 max-w-md w-full mx-4 shadow-2xl">
      <div class="flex items-center justify-between mb-8">
        <h3 class="text-3xl font-bold text-gray-800">开启干预之旅</h3>
        <button onclick="closeRegisterModal()" class="text-gray-400 hover:text-gray-600 text-2xl">
          <i class="fas fa-times"></i>
        </button>
      </div>
      
      <form onsubmit="handleRegister(event)" class="space-y-6">
        <div>
          <label class="block text-gray-700 font-medium mb-2">手机号</label>
          <input type="tel" id="registerPhone" class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:outline-none focus:border-purple-500 transition-colors" placeholder="请输入手机号" required>
        </div>
        
        <div>
          <label class="block text-gray-700 font-medium mb-2">验证码</label>
          <div class="flex gap-3">
            <input type="text" id="registerCode" class="flex-1 px-4 py-3 border-2 border-gray-200 rounded-xl focus:outline-none focus:border-purple-500 transition-colors" placeholder="请输入验证码" required>
            <button type="button" onclick="sendVerifyCode()" class="btn px-6 py-3 bg-purple-100 text-purple-600 font-medium rounded-xl hover:bg-purple-200 whitespace-nowrap">
              获取验证码
            </button>
          </div>
        </div>
        
        <div>
          <label class="block text-gray-700 font-medium mb-2">设置密码</label>
          <input type="password" id="registerPassword" class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:outline-none focus:border-purple-500 transition-colors" placeholder="请设置密码（6-20位）" required>
        </div>
        
        <div>
          <label class="block text-gray-700 font-medium mb-2">确认密码</label>
          <input type="password" id="registerConfirmPassword" class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:outline-none focus:border-purple-500 transition-colors" placeholder="请再次输入密码" required>
        </div>
        
        <button type="submit" class="w-full btn py-4 bg-gradient-to-r from-purple-600 to-pink-500 text-white font-bold text-lg rounded-xl shadow-lg hover:shadow-xl">
          注册
        </button>
      </form>
      
      <div class="mt-6 text-center">
        <p class="text-gray-600">
          已有账号？
          <button onclick="switchToLogin()" class="text-purple-600 hover:text-purple-700 font-bold">立即登录</button>
        </p>
      </div>
    </div>
  </div>

  <script>
    // 移动端菜单
    function toggleMobileMenu() {
      const menu = document.getElementById('mobileMenu');
      menu.classList.toggle('active');
    }
    
    // 模态框控制
    function openLoginModal() {
      const modal = document.getElementById('loginModal');
      modal.classList.remove('hidden');
      setTimeout(() => modal.classList.add('active'), 10);
    }
    
    function closeLoginModal() {
      const modal = document.getElementById('loginModal');
      modal.classList.remove('active');
      setTimeout(() => modal.classList.add('hidden'), 300);
    }
    
    function openRegisterModal() {
      const modal = document.getElementById('registerModal');
      modal.classList.remove('hidden');
      setTimeout(() => modal.classList.add('active'), 10);
    }
    
    function closeRegisterModal() {
      const modal = document.getElementById('registerModal');
      modal.classList.remove('active');
      setTimeout(() => modal.classList.add('hidden'), 300);
    }
    
    function switchToRegister() {
      closeLoginModal();
      setTimeout(() => openRegisterModal(), 300);
    }
    
    function switchToLogin() {
      closeRegisterModal();
      setTimeout(() => openLoginModal(), 300);
    }
    
    // 点击模态框外部关闭
    document.getElementById('loginModal').addEventListener('click', function(e) {
      if (e.target === this) closeLoginModal();
    });
    
    document.getElementById('registerModal').addEventListener('click', function(e) {
      if (e.target === this) closeRegisterModal();
    });
    
    // 表单处理
    function handleLogin(e) {
        e.preventDefault();
        const phone = document.getElementById('loginPhone').value;
        const password = document.getElementById('loginPassword').value;
        
      // 这里应该调用后端 API
      alert('登录功能待对接后端接口');
      console.log('Login:', { phone, password });
    }
    
    function handleRegister(e) {
        e.preventDefault();
        const phone = document.getElementById('registerPhone').value;
        const code = document.getElementById('registerCode').value;
        const password = document.getElementById('registerPassword').value;
        const confirmPassword = document.getElementById('registerConfirmPassword').value;
        
        if (password !== confirmPassword) {
          alert('两次密码输入不一致');
          return;
        }
        
      // 这里应该调用后端 API
      alert('注册功能待对接后端接口');
      console.log('Register:', { phone, code, password });
    }
    
    function sendVerifyCode() {
      const phone = document.getElementById('registerPhone').value;
      if (!phone) {
        alert('请先输入手机号');
        return;
      }
      
      // 这里应该调用后端 API
      alert('验证码发送功能待对接后端接口');
      console.log('Send code to:', phone);
    }
    
    // FAQ 切换
    function toggleFAQ(button) {
      const content = button.nextElementSibling;
      const arrow = button.querySelector('.faq-arrow');
      
      if (content.style.maxHeight) {
        content.style.maxHeight = null;
        arrow.classList.remove('rotate');
          } else {
        // 关闭其他已打开的 FAQ
        document.querySelectorAll('.faq-content').forEach(item => {
          item.style.maxHeight = null;
        });
        document.querySelectorAll('.faq-arrow').forEach(item => {
          item.classList.remove('rotate');
        });
        
        // 打开当前 FAQ
        content.style.maxHeight = content.scrollHeight + 'px';
        arrow.classList.add('rotate');
      }
    }
    
    // 平滑滚动到功能区
    function scrollToFeatures() {
      document.getElementById('features').scrollIntoView({ 
        behavior: 'smooth',
        block: 'start'
      });
    }
    
    // 能力曲线图表
    document.addEventListener('DOMContentLoaded', function() {
      const ctx = document.getElementById('abilityChart');
      if (ctx) {
        new Chart(ctx.getContext('2d'), {
          type: 'line',
          data: {
            labels: ['第1周', '第2周', '第3周', '第4周', '第5周', '第6周'],
            datasets: [
              {
                label: '社交能力',
                data: [30, 35, 42, 48, 55, 62],
                borderColor: '#667eea',
                backgroundColor: 'rgba(102, 126, 234, 0.1)',
                tension: 0.4,
                fill: true,
                pointRadius: 4,
                pointHoverRadius: 6
              },
              {
                label: '自理能力',
                data: [40, 45, 52, 58, 65, 72],
                borderColor: '#f093fb',
                backgroundColor: 'rgba(240, 147, 251, 0.1)',
                tension: 0.4,
                fill: true,
                pointRadius: 4,
                pointHoverRadius: 6
              },
              {
                label: '认知能力',
                data: [25, 30, 38, 45, 52, 60],
                borderColor: '#4facfe',
                backgroundColor: 'rgba(79, 172, 254, 0.1)',
                tension: 0.4,
                fill: true,
                pointRadius: 4,
                pointHoverRadius: 6
              }
            ]
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
              legend: {
                position: 'bottom',
                labels: {
                  usePointStyle: true,
                  padding: 15,
                  font: {
                    size: 12
                  }
                }
              },
              tooltip: {
                mode: 'index',
                intersect: false,
                backgroundColor: 'rgba(0, 0, 0, 0.8)',
                padding: 12,
                cornerRadius: 8
              }
            },
            scales: {
              y: {
                beginAtZero: true,
                max: 100,
                grid: {
                  color: 'rgba(0, 0, 0, 0.05)'
                },
                ticks: {
                  stepSize: 20
                }
              },
              x: {
                grid: {
                  display: false
                }
              }
            }
          }
        });
      }
      
      // 导航栏滚动效果
      let lastScroll = 0;
      window.addEventListener('scroll', () => {
        const nav = document.querySelector('nav');
        const currentScroll = window.pageYOffset;
        
        if (currentScroll > 100) {
          nav.classList.add('shadow-xl');
        } else {
          nav.classList.remove('shadow-xl');
        }
        
        lastScroll = currentScroll;
      });
      
      // 平滑滚动锚点
      document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
          const href = this.getAttribute('href');
          if (href !== '#' && href !== '') {
          e.preventDefault();
            const target = document.querySelector(href);
            if (target) {
              target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
              });
              
              // 关闭移动端菜单
              document.getElementById('mobileMenu').classList.remove('active');
            }
          }
        });
      });
    });
  </script>
</body>
</html>
